<template>
  <div class="detail">
    <header class="flex">
      <div class="headL flex">
        <img
          @click="goIndex"
          class="logo headIcon"
          src="https://m.imooc.com/static/wap/static/common/img/logo-small@2x.png"
          alt=""
        />

        <!-- 头部下拉菜单 -->
        <van-collapse v-model="activeNames">
          <van-collapse-item size="large" title="实战" name="1"
            >sadasdasdasfafasfassfsafafafsas</van-collapse-item
          >
        </van-collapse>
      </div>
      <!-- 头部下拉菜单结束 -->

      <div class="headR">
        <van-icon
          class="share headIcon"
          size="25"
          color="#B7BBBF"
          name="share"
          @click="showShare = !showShare"
        />
        <van-share-sheet
          v-model="showShare"
          title="立即分享给好友"
          :options="options"
        />
        <van-icon
          class="wap-nav headIcon"
          size="25"
          color="#B7BBBF"
          name="wap-nav"
        />
      </div>
    </header>

    <section>
      <!-- 课程信息 -->
      <div v-if="data" class="headDetail flex">
        <img :src="data.img" alt="" />
        <div class="info">
          <h3>{{ data.title }}</h3>
          <p class="authorInfo">{{ data.author }} | {{ data.authorLv }}</p>
          <p class="hot"></p>
          <p class="price">￥{{ data.price }}.00</p>
        </div>
      </div>
      <!-- 课程信息结束 -->

      <!-- 内容条 -->
      <div v-if="data" class="contentItem flex">
        <span>内容</span>
        <ul class="flex">
          <li>
            <p class="infoKey">课程难度</p>
            <p class="infoValue">{{ data.level }}</p>
          </li>
          <li>
            <p class="infoKey">视频时长</p>
            <p class="infoValue">{{ data.time }}小时</p>
          </li>
          <li>
            <p class="infoKey">学习人数</p>
            <p class="infoValue">{{ data.studyPeople }}人</p>
          </li>
          <li>
            <p class="infoKey">课程评分</p>
            <p class="infoValue">{{ data.range }}分</p>
          </li>
        </ul>
      </div>
      <!-- 内容条结束 -->

      <!-- 吸顶栏 -->
      <div class="stickyBar">
        <van-sticky>
          <van-tabs v-model="activeName">
            <van-tab title="简介" name="a"></van-tab>
            <van-tab title="目录" name="b"></van-tab>
            <van-tab title="服务" name="c"></van-tab>
            <van-tab title="评价" name="d"></van-tab>
            <van-tab title="套餐" name="f"></van-tab>
          </van-tabs>
        </van-sticky>
      </div>

      <!-- 吸顶栏结束 -->

      <div class="content">
        <img src="http://img.mukewang.com/szimg/5fbf61de08430b5907501116.jpg" />

        <img
          src="http://img.mukewang.com/szimg/5fbf61d008e2c73007501032.jpg"
        /><img
          src="http://img.mukewang.com/szimg/5fbf61ef082f4cc507501084.jpg"
        />

        <img src="http://img.mukewang.com/szimg/5fbf61fd08b888c407500984.jpg" />
      </div>
    </section>

    <!-- 加入购物车栏 -->
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" @click="onClickIcon" />
      <van-goods-action-icon icon="cart-o" text="购物车" @click="onClickIcon" />
      <van-goods-action-icon icon="shop-o" text="店铺" @click="onClickIcon" />
      <van-goods-action-button
        type="danger"
        text="立即购买"
        @click="onClickButton"
      />
    </van-goods-action>
    <!-- 加入购物车栏 -->
  </div>
</template>


<style lang="scss" scoped>
header {
  line-height: 48px;
  height: 48px;
  justify-content: space-between;
  padding-left: 10px;
  padding-right: 10px;
  background-color: #fff;
  .logo {
    border-radius: 50%;
    width: 28px;
    height: 28px;
  }
  .headIcon {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 5px;
  }
}
.headDetail {
  position: relative;
  padding-top: 0.26666667rem;
  padding-bottom: 0.42666667rem;
  background: rgba(183, 187, 191, 0.1);
  .info {
    // width: 100%;
    height: 3.41333333rem;
    margin-left: 20px;
    h3 {
      font-weight: 700;
      font-size: 0.42666667rem;
      line-height: 0.58666667rem;
      color: #2b333b;
      word-wrap: break-word;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
    }
    .authorInfo {
      max-width: 100%;
      font-size: 0.32rem;
      color: #71777d;
      line-height: 0.48rem;
      margin-top: 0.21333333rem;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .price {
      color: #f01414;
      font-weight: 700;
      font-size: 0.42666667rem;
      margin-top: 20px;
    }
  }
}
.contentItem {
  padding-top: 0.37333333rem;
  padding-bottom: 0.37333333rem;
  font-size: 0.34666667rem;
  line-height: 0.48rem;
  color: #71777d;
  background-color: #fff;
  padding-left: 0.42666667 * 2rem;
  margin-left: -16px;
  margin-right: -16px;
  box-sizing: content-box;
  span {
    color: #b7bbbf;
  }
  ul {
    li {
      margin-left: 0.42666667rem;

      .infoValue {
        color: #2b333b;
        margin-top: 0.21333333rem;
        font-weight: 600;
      }
    }
  }
}
.stickyBar {
  margin-top: 10px;
  margin-left: -16px;
  margin-right: -16px;
  img {
    width: 100%;
  }
}
.content {
  img {
    width: 100%;
  }
}
</style>


<script>
import { Toast } from "vant";
export default {
  data() {
    return {
      activeNames: [],
      showShare: false,
      activeName: "a",
      options: [
        [
          { name: "微信", icon: "wechat" },
          { name: "朋友圈", icon: "wechat-moments" },
          { name: "微博", icon: "weibo" },
          { name: "QQ", icon: "qq" },
        ],
        [
          { name: "复制链接", icon: "link" },
          { name: "分享海报", icon: "poster" },
          { name: "二维码", icon: "qrcode" },
          { name: "小程序码", icon: "weapp-qrcode" },
        ],
      ],
      axios: {
        "id|+1": 1, //生成课程id，自增1
        title: "@ctitle(20)", //生成课程名
        "price|199-999": 199, //随机生成课程价格 在30-1000之间
        img: "@Image('100x128','#6ff','#f7f0d4','详情')", //生成随机图片，大小/背景色/字体颜色/文字信息
        "level|1": ["高阶", "进阶"], //等级是数组中的一个
        "studyPeople|100-999": 100,
        author: "@ctitle(4)", //生成作者名
        "authorLv|1": [
          "BAT高级工程师",
          "前端架构师",
          "十年资深架构师",
          "资深数据库工程师",
          "Go语言技术专家",
        ], //等级是数组中的一个
        "people|100-1000": 100,
        "time|10-30": 10, //视频时长
        "range|0-10.2": 1.2, //评分
      },
      data: null,
    };
  },
  methods: {
    goIndex() {
      this.$router.push("home");
    },
    getData() {
      this.$axios
        .post("/detail/content", { body: this.axios })
        .then((res) => {
          console.log(res);
          this.data = res.data["data"];
          console.log(this.data);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    onClickIcon() {
      Toast("点击图标");
    },
    onClickButton() {
      Toast("点击按钮");
    },
  },
  created() {
    this.getData();
  },
};
</script>